<template>
    <div class="mycarCard">
        <div class="mydetail">
            <div class="iconBtn">
                <span v-on:click="backHistory" class="iconfont icon-fanhui">返回</span>
            </div>
            <h2>我的车主卡信息</h2>
            <el-form
                    ref="form"
                    :model="form"
                    label-width="120px"
                    :label-position="labelPosition">
                <el-form-item label="持卡人">
                    <el-input v-model="form.user_name"></el-input>
                </el-form-item>
                <el-form-item label="手机号">
                    <el-input v-model="form.user_phone"></el-input>
                </el-form-item>
                <el-form-item label="车主姓名">
                    <el-input v-model="form.user_name"></el-input>
                </el-form-item>
                <el-form-item label="车牌号码">
                    <el-input v-model="form.car_license_num"></el-input>
                </el-form-item>
                <el-form-item label="车牌型号">
                    <el-input v-model="form.car_specific_models_desc"></el-input>
                </el-form-item>
                <el-form-item label="车辆初登日期">
                    <el-input v-model="form.owner_first_date"></el-input>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    import * as api from '../../utils/api'
    export default {
        name: "usercarcard",
        data(){
            return{
                labelPosition:'left',
                dialogImageUrl: '',
                dialogVisible: false,
                styles:'',
                select:'',
                form:{},
                loginData:{}
            }
        },
        created() {
            this.getMyCard()
        },
        methods:{
            // 根据用户id查询车主卡
            getMyCard(){
                this.loginData=this.$store.state.msgCount.user
                this.axios({
                    method:'get',
                    url:api.GET_OWNERCARD,
                    params:{userId:this.loginData.user_id}
                }).then(data=>{
                    this.form=data.data.data[0]
                    console.log(this.form)
                    console.log(this.form.user_id)
                    console.log(data)
                })
            },
            // 返回上一页的方法
            backHistory(){
                this.$router.go(-1)
            }
        },

    }
</script>
<style>
    @import '../../assets/font/yl/iconfont.css';
</style>

<style scoped lang="less">
    .mycarCard{
        width: 60rem;
        margin: auto;
        /*border: 1px solid red;*/
    }
    .mydetail{
        width: 100%;
        position: relative;
        /*border: 1px solid orange;*/
        background-color: #f9f9f9;
        border: 1px solid #FCFCFC;
        margin-top: 5rem;
        padding-bottom: 2rem;
    }
    h2{
        padding-top: 0;
        font-size: 20px;
        color: white;
        background-color: #53617B;
        height: 40px;
        line-height: 40px;
        text-align: center;
    }
    form {
        width: 500px;
        /*border: #55a532 1px solid;*/
        margin:  auto;
        /*background-color: rgba(117, 185, 214, 0.54);*/
        margin-top: 2rem;
    }
    .el-input{
        width: 300px;
    }
    .el-form-item{
        width: 100px;
    }
    .iconBtn{
        position:absolute;
        left: 100px;
        top: 8px;
        color: white;
    }
    form span{
        color: white;
    }
</style>